<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>分页</title>
   <link rel="stylesheet" href="../css/bootstrap4.5.min.css">
   <link rel="stylesheet" href="../css/public.css">
   <style>
      .com_parts_2 {
         display: flex;
      }

      .com_parts_2_left,
      .com_parts_2_right {
         display: block;
         width: 36px;
         height: 36px;
         line-height: 30px;
         text-align: center;
         border: 1px solid #e4e4e4;
      }

      .com_parts_2_num {
         width: 36px;
         height: 36px;
         line-height: 36px;
         text-align: center;
         border-top: 1px solid #e4e4e4;
         border-bottom: 1px solid #e4e4e4;
      }

      .com_parts_2_total p{
         padding: 5px 10px;
         color: var(--c_text);
         font-size: var(--f_notes);
         line-height: var(--l_notes);
      }

      .com_parts_2_jump {
         padding: 0px 5px;
      }

      .com_parts_2_jump p span {
         color: var(--c_text);
         font-size: var(--f_notes);
         line-height: var(--l_notes);
      }

      .com_parts_2_jump input {
         width: 60px;
         height: 36px;
         border-radius: 3px;
         padding: 0 8px;
         border: 1px solid #e4e4e4;
         margin: 0 5px;
      }

      .com_parts_2_jump input:hover{
         border: 1px solid#ef4136;
         transition: .2s;
      }

      .yes {
         color: var(--c_text);
         font-size: var(--f_notes);
         line-height: var(--l_notes);
         display: block;
         text-align: center;
         height: 36px;
         padding: 0 13px;
         border-radius: 3px;
         padding-top: 4px;
         border: 1px solid #e4e4e4;
      }

      .yes:hover{
         transition: .2s;
         background-color: #ef4136;
         color: #e4e4e4;
      }
   </style>
</head>

<body>
   <div class="com_parts_2">
      <a href="#" class="com_parts_2_left">
         <svg t="1616728582423" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="3351" width="32" height="32">
            <path
               d="M428.141714 512l206.518857 206.482286a18.285714 18.285714 0 0 1-25.892571 25.892571l-219.428571-219.428571a18.285714 18.285714 0 0 1 0-25.892572l219.428571-219.428571a18.285714 18.285714 0 0 1 25.892571 25.892571L428.141714 512z"
               p-id="3352"></path>
         </svg>
      </a>

      <div class="com_parts_2_num"><span>1</span></div>

      <a href="#" class="com_parts_2_right">
         <svg t="1616728630451" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="3010" width="32" height="32">
            <path
               d="M595.858286 512l-206.518857-206.482286a18.285714 18.285714 0 0 1 25.892571-25.892571l219.428571 219.428571a18.285714 18.285714 0 0 1 0 25.892572l-219.428571 219.428571a18.285714 18.285714 0 0 1-25.892571-25.892571L595.858286 512z"
               p-id="3011"></path>
         </svg>
      </a>

      <div class="com_parts_2_total"><p>共1页</p></div>

      <div class="com_parts_2_jump"><p><span>到第<input type="text"></span><span>页</span></p></div>

      <a href="#" class="yes"><p>确定</p></a>
        
   </div>
</body>

</html>